<?php	
	echo $this->Html->css('lib/jquery.jcrop');
	echo $this->Html->script('lib/jquery.Jcrop');
	
?>
	<style type="text/css">
		#preview
		{
			width: <?php echo $info['targ_w']?>px;
			height: <?php echo $info['targ_h']?>px;
			overflow:hidden;
		}
	</style>
	<h1>Jcrop Plugin Behavior</h1>
		<table style="border: 1px solid #ccc">
			<tr>
				<td>
					<img src="<?php echo $info['path']?>" id="cropbox" alt="cropbox" />
					
				</td>
				<td style="verticl-align: top">
					Thumb Preview:
					<div id="preview">
						<img src="<?php echo  $info['path'] ?>" alt="thumb" />
					</div>
				</td>
			</tr>
		</table>

	<?php 
		echo $this->Form->create('Avatar', array('action' => 'crop'));
		echo $this->Form->hidden('x', array('id' => 'x'));
		echo $this->Form->hidden('y', array('id' => 'y'));
		echo $this->Form->hidden('w', array('id' => 'w'));
		echo $this->Form->hidden('h', array('id' => 'h'));
		echo $this->Form->hidden('image_name', array('value' => $info['name']));
		echo $this->Form->end('Crop');
	?>


	<script type="text/javascript">
		$(function(){
			$('#cropbox').Jcrop({
				aspectRatio: <?php echo  $info['ratio']?>,
				setSelect: [0,0,<?php echo $info['orig_w_h'].','.$info['orig_w_h'];?>],
				onSelect: updateCoords,
				onChange: updateCoords
			});
		});
		
		function updateCoords(c)
		{
			showPreview(c);
			$("#x").val(c.x);
			$("#y").val(c.y);
			$("#w").val(c.w);
			$("#h").val(c.h);
		}
		
		function showPreview(coords)
		{
			var rx = <?php echo $info['targ_w'];?> / coords.w;
			var ry = <?php echo $info['targ_h'];?> / coords.h;
			
			$("#preview img").css({
				width: Math.round(rx*<?php echo $info['orig_w_h'];?>)+'px',
				height: Math.round(ry*<?php echo $info['orig_w_h'];?>)+'px',
				marginLeft:'-'+  Math.round(rx*coords.x)+'px',
				marginTop: '-'+ Math.round(ry*coords.y)+'px'
			});
		}
	</script>

	
	